<script setup>
import {
  getAlipayFn,
  getH5WxPay,
  getPayResult,
  getLevelList,
} from "@/api/register";
import { preOrder, getWechatPay } from "@/api/vip.js";
import { useUserStore } from "@/store/modules/user/index.js";
import Introduce from "./Introduce.vue";
import projectConfig from "@/config/project/index.js";
import payAgreements from "./payAgreements.vue";
import config from "@/config/config.json";

import { ref, onMounted, computed } from "vue";
import Toast from "@vant/weapp/dist/toast/toast";

const emit = defineEmits("payInfo");

const active = ref({});
const levelList = ref([]);
const userInfo = computed(() => userStore.userInfo);
const checked = ref(false);
const payAgree = ref(false);
const introduceList = ref([
  {
    title: "官方最新模型VIP级聊天接口",
    content: "消息秒回，秒杀全部盗版",
  },
  {
    title: "您的AI私人助理",
    content: "关于医疗、自媒体、学习工作等，帮您提高效率",
  },
  {
    title: "AI工作小帮手",
    content: "提供全天候服务，让您在工作中更高效、更轻松",
  },
]);

const vipChange = (item) => {
  active.value = item;
};
const userStore = useUserStore();
const getLevelListView = async () => {
  const res = await getLevelList();
  res.data = res.data.filter((item) => item.level !== 7);
  active.value = res.data[res.data.length - 1];
  levelList.value = res.data;
  // levelList.value.push(...res.data)
  // levelList.value.push(...res.data)
};
const onClickPayAge = () => {
  payAgree.value = true;
};
const onChangeCheckbox = (e) => {
  checked.value = e.detail;
};
onMounted(() => {
  getLevelListView();
  userStore.getUserInfo();
});

// const getUserInfoData = async () => {
//   const res = await getUserInfo()
//   userInfo.value = res.data
// }

console.log([new Date(), "pay"]);

let openId = userStore.userInfo.openId;
const orderInfo = ref({});
/**
 * @description 微信app支付
 * @param {*} param
 * @param {Object} param.userBuyInfo 用户下单的数据
 */
async function getPreOrder() {
  if (!checked.value) return Toast.fail("请先阅读并同意《支付协议》");
  if (!userInfo.value.isBindPhone && projectConfig.pay.isBindPhone) {
    return Toast({
      message: "请先绑定手机号码",
      onClose: () => {
        uni.navigateTo({ url: "/pages/auth/index" });
      },
    });
  }
  emit("payInfo", active.value);
}
</script>

<template>
  <div :class="levelList?.length <= 3 ? 'flex' : 'vipPay'">
    <div class="vipPayContentBox" v-for="(item, index) of levelList"
      :class="active.id === item.id ? 'active' : 'vipPayContentBox'" @click="vipChange(item)">
      <div class="remark" v-if="item.remark">{{ item.remark }}</div>

      <div class="vipPayContentBoxTitle">{{ item.levelName }}</div>
      <div>
        ￥
        <span class="vipPayContentBoxMoney">{{ item.price }}</span>
      </div>
      <div class="vipPayContentBoxDel" :style="{ color: active === index ? '#FFF' : '#B3B7BC' }">
        原价{{ item.orgPrice }}元
      </div>
    </div>
  </div>
  <div class="Title">
    算力：
    <span class="con"> 类似手机上网消耗流量 </span>
  </div>
  <div>
    <button class="Paybtn" @click="getPreOrder">立即解锁</button>
  </div>
  <div class="myRead">
    <van-checkbox :value="checked" @change="onChangeCheckbox">我已阅读并同意</van-checkbox>
    <span class="payAge" @click="onClickPayAge"> 《支付协议》</span>
  </div>
  <payAgreements :pay-agree="payAgree" @update:payAgree="payAgree = false" />
  <Introduce :introduceList="introduceList"></Introduce>
</template>

<style lang="less" scoped>
.flex,
.vipPay {
  .vipPayContentBox {
    box-sizing: border-box;
    border: 6rpx solid transparent;
    width: 210rpx;
    min-width: 210rpx;
    height: 236rpx;
    background-color: var(--a-main-bg-color);
    border-radius: 24rpx;
    color: var(--a-one-text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 56rpx;
    margin: 5rpx 30rpx 30rpx 0;
    position: relative;

    &:nth-child(3) {
      margin-right: 0;
    }

    .vipPayContentBoxTitle {
      font-size: 28rpx;
      letter-spacing: 1px;
    }

    .vipPayContentBoxMoney {
      // font-size: 26.39rpx;
      font-size: 50.81rpx;
      font-weight: bold;
    }

    .vipPayContentBoxDel {
      font-size: 28.22rpx;
      text-decoration: line-through;
    }

    .remark {
      position: absolute;
      top: -30rpx;
      left: -7rpx;
      width: 200rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: #e66255;
      border-radius: 25rpx 25rpx 25rpx 0rpx;
      font-size: 23rpx;
      color: var(--a-one-text-color);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: normal;
    }
  }

  .active {
    box-sizing: border-box;
    background: #fff6e0;
    font-weight: bold;
    border-radius: 24rpx;
    border: 6rpx solid #ffcf86;
    color: #6b2c00 !important;
    z-index: 100;
  }
}

.vipPay {
  box-sizing: border-box;
  display: flex;
  overflow-x: scroll;
  padding: 30rpx 10rpx 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex {
  display: flex;
  justify-content: space-evenly;

  .vipPayContentBox {
    margin-right: 0;
  }
}

.Title {
  height: 59rpx;
  font-size: 38rpx;
  color: #ffcf86;
  margin: 10rpx 0 20rpx 10rpx;
  line-height: 59rpx;
}

.con {
  font-size: 30rpx;
  font-weight: 400;
  // color: #14DFE9;
  line-height: 47rpx;
}

.Paybtn {
  width: 626rpx;
  height: 116rpx;
  background: linear-gradient(90deg, #ffecc1 0%, #f8bc75 100%);
  border-radius: 58rpx;
  color: #6b2c00;
  font-weight: bold;
  text-align: center;
  line-height: 116rpx;

  &::after {
    border: none;
  }
}

.myRead {
  font-size: 26rpx;
  text-align: center;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.payAge {
  color: #ffcf86;
  transform: translate(0, 2rpx);
}
</style>
